<template>
  <div class="index-box">
    <div class="content-head">
      <a-row>
        <a-col span="12">
          <a-button type="primary" icon="plus" style="margin-right: 8px;" @click="() => { unitSetModal = true; editid = 0}">添加</a-button>
          <a-popconfirm title="确定要删除当前所选单元?" @confirm="deleteInfo()">
            <a-button :disabled="$common.isEmpty(selectedRowKeys)">删除</a-button>
          </a-popconfirm>
        </a-col>
        <a-col span="10" offset="2">
          <a-input-group>
            <a-input-search placeholder="请输入小区单元名称" enterButton @search="onSearch"/>
          </a-input-group>
        </a-col>
      </a-row>
    </div>
    <div class="content-body">
      <s-table ref="table" :columns="columns" rowKey="id"  :data="dataSource" :loading="loading" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
        <template slot="operation" slot-scope="text,record">
          <a-dropdown>
            <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="operation($event,record)">编辑</a-menu-item>
              <a-menu-item key="2">
                 <a-popconfirm title="是否要删除此行？" @confirm="deleteInfo([record.id])">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </s-table>
    </div>
    <!-- 单元设置弹窗 -->
    <a-modal title="单元设置" v-model="unitSetModal" :afterClose="afterCloseUnitModal" @ok="handleSubmit">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="单元名" :labelCol="{xs:{span:24},sm:{span:8}}" :wrapperCol="{xs:{span:24},sm:{span:12}}">
          <a-input placeholder="请输入单元名" v-decorator="['name',{rules:[{required:true,message:'单元名不可为空'}]}]"></a-input>
        </a-form-item>
        <!-- <a-form-item label="中间层" :labelCol="{xs:{span:24},sm:{span:8}}" :wrapperCol="{xs:{span:24},sm:{span:12}}">
          <a-input placeholder="请输入中间层" v-decorator="['middle_layers',{rules:[{required:true,message:'中间层不可为空'}]}]"></a-input>
        </a-form-item> -->

        <a-form-item label="楼层数" :labelCol="{xs:{span:24},sm:{span:8}}" :wrapperCol="{xs:{span:24},sm:{span:12}}">
          <a-input placeholder="请输入楼层数" v-decorator="['layers',{rules:[{required:true,message:'楼层数不可为空'}]}]"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {STable} from '@/components'
import { mapGetters } from 'vuex'
  export default {
    name: 'data_building_unit',
    components: {
      STable
    },
    data() {
      return {
        form:this.$form.createForm(this),
        columns:[
          {
            title:'单元名',
            dataIndex: 'name',
          },
          {
            title: '所属小区',
            dataIndex: 'bd_info_id_text',
          },
          {
            title: '所属楼宇',
            dataIndex: 'building_id_text',
          },
          // {
          //   title:'中间层',
          //   dataIndex: 'middle_layers',
          // },
           {
            title:'楼层数',
            dataIndex: 'layers',
          },
          {
            title: '房屋数量',
            dataIndex: 'houses_number'
          },
          {
            title: '操作',
            dataIndex:'operation',
            scopedSlots:{customRender:'operation'}
          }
        ],
        queryParam:{},
        dataSource: parameter=>{
          let param=Object.assign(parameter, this.queryParam)
          return new Promise((resolve,reject) => {
            this.axios({
              method:'get',
              url:'/community/get_unit_list',
              params:Object.assign(param,{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg(),bid:this.bid})
            }).then(res => {
              this.loading = false;
              if(res.code === 0){
                resolve(res.data)
              }else{
                this.$message.error(res.data.msg,2);
              }
            }).catch(err => {
              this.$message.error('服务器发生错误...',2);
            })
          })
        },
        selectedRowKeys: [],
        loading:false,
        unitSetModal:false, // 单元设置弹窗内容
        bid:0, //楼宇id
        editid:0
      }
    },
    created() {
       let { id } = this.$route.params;
       this.bid=id
       if(this.bid){
      }else this.$router.go(-1);
    },
    methods:{
      ...mapGetters(['token', 'pmsArId', 'nowMg']),
      // 提交信息
      handleSubmit() {
        this.form.validateFields((err, values) => {
          if (err) {
            for(let key in err){
              for(let item of err[key]['errors']) return this.$message.warning(item['message'],2);
            }
          }
          values['token'] = this.token();
          values['id'] = this.editid;
          values['bid'] = this.bid;
          this.loading=true
          this.axios({
            method:'post',
            url:'/community/edit_unit_list',
            data:values,
          }).then(res => {
            this.loading = false;
            if(res.code == 0){
              this.$message.success(res.msg,1);
              this.$refs.table.refresh()
               this.unitSetModal=false
            }else this.$message.warning(res.msg);
          }).catch(() => {this.$message.error('服务器发生错误...',2),this.spinning = false;});
        });
      },
      // 设置单元弹窗完全关闭
      afterCloseUnitModal() {
        this.form.resetFields();
      },
      deleteInfo(ids = this.selectedRowKeys){
        this.loading=true
        this.axios({
            method:'post',
            url:'/community/del_unit_list',
            data:{token:this.token(),ids:ids.join(',')}
          }).then(res => {
            this.loading = false;
            if(res.code === 0){
              this.$refs.table.refresh()
            }else{
              this.$message.error(res.data.msg,2);
            }
          }).catch(err => {
            this.$message.error('服务器发生错误...',2);
          })
      },
      remove(id) {
        this.selectedRowKeys = [id];
        this.deleteInfo();
      },
      operation({ key },data){
        setTimeout(()=>{
          this.form.setFieldsValue({name:data.name,layers:data.layers})
        },0)

        this.unitSetModal=true
        this.editid=data.id
      },
      onSearch(val) {
        this.queryParam['name'] = val;
        this.$refs.table.refresh(true);
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
      }
    }
  }
</script>

<style lang="less" scoped>
  .index-box{
    background: #ffffff;
    padding: 25px;
    box-sizing: border-box;
    .content-body{
      padding-top:20px;
    }
  }
</style>